import { IRouteComponentProps, useModel } from 'umi'
import React from 'react';
import { useState, useEffect } from 'react'
import styles from './[id].less'
import Detail from '@/components/detailList'
// import { LeftOutlined } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
const Cart: React.FC = (props: any) => {
  let { getHome } = useModel('home', model => ({ getHome: model.getHome }));
  let [categoryList, setCategoryList] = useState([]) //切换数据
  let [typeList, updataList] = useState([])
  let [navIndex, carIndex] = useState(0)
  useEffect(() => {
    getHomeList()
  }, [getHome])
  async function getHomeList() {
    let res = await getHome()
    setCategoryList(res.data.categoryList)
    // updataId(res.data.categoryList[0].id)
    let id = props.match.params.id
    let index = res.data.categoryList.map((item: any) => item.id).indexOf(+id)
    updataList(res.data.categoryList[index].goodsList)
    carIndex(index)
    console.log(index);
  }
  //点击头部tab切换
  async function tabContent(index: any) {
    carIndex(index)
    let res = await getHome();
    updataList(res.data.categoryList[index].goodsList)
    console.log(res.data.categoryList[index].goodsList);
  }
  //返回首页
  async function backHome() {
    props.history.go(-1)
  }
  return (
    <div className={styles.detail}>
      <div className={styles.posi}>
        <div className={styles.head}>
          <LeftOutlined onClick={backHome} />
          <span>奇趣分类</span>
          <span>  </span>
        </div>
        <div className={styles.tab}>
          {
            categoryList.map((item: any, index: number) => {
              return <span key={item.id} onClick={() => { tabContent(index) }} className={index == navIndex ? `${styles.active}` : ''}> {item.name} </span>
            })
          }
        </div>
      </div>
      <div className={styles.content}>
        {
          typeList.map((item: any) => {
            return <Detail ite={item}/>
            // <li key={item.id}>
            //   <img src={item.list_pic_url} alt="" />
            //   <p>{item.name}</p>
            //   <p className={styles.price}> ￥{item.retail_price}元</p>
            // </li>
          })
        }
      </div>
    </div>
  );
}


export default Cart;
